<template>
    <div class="content">
        <el-tabs type="border-card" @tab-click="handleClick">
            <el-tab-pane label="待审批">
                <div class="top">
                    <ul>
                        <li class="select">
                            <p>房屋</p>
                            <el-cascader v-model="roomInfo" :options="options" clearable
                                @change="handleChange"></el-cascader>
                        </li>
                        <li>
                            <TextIpt ref="fitmentName">
                                <p>姓名</p>
                            </TextIpt>
                        </li>
                        <li>
                            <TextIpt ref="fitmentPhone">
                                <p>手机号</p>
                            </TextIpt>
                        </li>
                    </ul>
                    <div class="btn">
                        <BlueBtn @click.native="query">查询</BlueBtn>
                        <RedBtn @click.native="reset(0)">一键重置</RedBtn>
                    </div>
                </div>
                <div class="table">
                    <el-table :data="filterFitment" border style="width: 100%">
                        <el-table-column type="index" width="50">
                        </el-table-column>
                        <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop"
                            :label="column.label" :width="column.width || null">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看</el-button> -->
                                <el-button size="mini" @click="approval(scope.$index, scope.row)">审批</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="已审批">
                <div class="top">
                    <ul>
                        <li>
                            <SelectIpt :lists="filmentState" ref="filmentState">
                                <p>状态</p>
                            </SelectIpt>
                        </li>
                        <li class="select">
                            <p>房屋</p>
                            <el-cascader v-model="fitmentSearch" :options="options" clearable
                                @change="filmentChange"></el-cascader>
                        </li>
                        <li>
                            <TextIpt ref="owner">
                                <p>姓名</p>
                            </TextIpt>
                        </li>
                        <li>
                            <TextIpt ref="ownerPhone">
                                <p>手机号</p>
                            </TextIpt>
                        </li>
                    </ul>
                    <div class="btn">
                        <BlueBtn @click.native="search">查询</BlueBtn>
                        <RedBtn @click.native="reset(1)">一键重置</RedBtn>
                    </div>
                </div>
                <div class="table">
                    <el-table :data="filterNoFitment" border style="width: 100%">
                        <el-table-column type="index" width="50">
                        </el-table-column>
                        <el-table-column v-for="column in table1Columns" :key="column.prop" :prop="column.prop"
                            :label="column.label" :width="column.width || null">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="look(scope.$index, scope.row)">查看</el-button>
                                <el-button size="mini" @click="replayNum(scope.$index, scope.row)"
                                    v-show="scope.row.FitmentState == '待支付'">收取服务费</el-button>
                                <el-button size="mini" @click="acceptance(scope.$index, scope.row)"
                                    v-show="scope.row.FitmentState == '待验收'">验收</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

            </el-tab-pane>

        </el-tabs>
        <!-- 点击审批对话框 -->
        <el-dialog title="审批" :visible.sync="approvalDialog" width="30%" :before-close="approvalClose" class="approval">
            <div class="fitment">
                <p>装修房间:{{ this.approvalForm.room }}</p>
                <p>装修工期:{{ this.approvalForm.day }}天</p>
            </div>
            <el-form ref="form" :model="approvalForm" label-width="130px" :rules="rules">
                <el-form-item label="审批结果" prop="result">
                    <el-radio-group v-model="approvalForm.result">
                        <el-radio label="通过"></el-radio>
                        <el-radio label="驳回"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="装修管理服务费" prop="money" v-if="approvalForm.result != '驳回'">
                    <el-input v-model="approvalForm.money"></el-input>
                </el-form-item>
                <el-form-item label="审批说明">
                    <el-input type="textarea" v-model="approvalForm.notes"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="approvalClose">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 收取服务费对话框 -->
        <el-dialog title="提示" :visible.sync="replayDialog" width="30%" :before-close="replayClose" class="replayDialog">
            <ul class="replayContent">
                <li>
                    <p>支付金额（元）：</p>
                    <span class="replayContent-num">{{ Number(replayForm.num).toFixed(2) }}</span>
                </li>
                <li>
                    <p>费用类型：</p>
                    <span>装修管理服务费</span>
                </li>
                <li>
                    <p>缴费业主：</p>
                    <span>{{ replayForm.owner }}</span>
                </li>
            </ul>
            <el-form ref="replayForm" :model="replayForm" label-width="80px" :rules="rules">
                <el-form-item label="支付方式" prop="type">
                    <el-select v-model="replayForm.type" placeholder="请选择支付方式">
                        <el-option value="现金"></el-option>
                        <el-option value="微信"></el-option>
                        <el-option value="支付宝"></el-option>
                        <el-option value="转账"></el-option>
                        <el-option value="刷卡"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="replayClose">取 消</el-button>
                <el-button type="primary" @click="replayConfirm">支付成功</el-button>
            </span>
        </el-dialog>
        <!-- 验收对话框 -->
        <el-dialog title="验收信息填写" :visible.sync="acceptanceDialog" width="40%" :before-close="acceptanceClose"
            class="acceptanceDialog">
            <p class="acceptanceTitle">业主已缴纳装修管理服务费<span>{{ acceptanceForm.num }}</span>元</p>
            <el-form ref="acceptanceForm" :inline="true" :model="acceptanceForm" label-width="80px" :rules="rules">
                <el-form-item label="装修房间">
                    <el-input disabled v-model="acceptanceForm.room"></el-input>
                </el-form-item>
                <el-form-item label="业主信息">
                    <el-input disabled v-model="acceptanceForm.owner"></el-input>
                </el-form-item>
                <el-form-item label="验收日期" prop="date">
                    <el-date-picker type="date" placeholder="选择日期" v-model="acceptanceForm.date"></el-date-picker>
                </el-form-item>
                <el-form-item label="验收人员" prop="addman">
                    <el-input v-model="acceptanceForm.addman"></el-input>
                </el-form-item>
                <el-form-item label="验收说明">
                    <el-input type="textarea" v-model="acceptanceForm.desc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="acceptanceClose">取 消</el-button>
                <el-button type="primary" @click="acceptanceConfrim">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 点击查看对话框 -->
        <el-dialog title="提示"  :visible.sync="lookDialog" width="40%"  class="lookDialog">
            <p class="lookTitle">装修用户信息</p>
            <ul class="lookContent">
                <li>
                    <p>装修房屋</p>
                    <span>{{ lookForm.room }}</span>
                </li>
                <li>
                    <p>申请时间</p>
                    <span>{{ lookForm.applyDate }}</span>
                </li>
                <li>
                    <p>业主姓名</p>
                    <span>{{ lookForm.owner }}</span>
                </li>
                <li>
                    <p>业主电话</p>
                    <span>{{ lookForm.phone }}</span>
                </li>
                <li>
                    <p>装修押金</p>
                    <span>{{ lookForm.num }}</span>
                </li>
                <li>
                    <p>装修天数</p>
                    <span>{{ lookForm.day }}</span>
                </li>
            </ul>

            <el-form ref="lookForm" :inline="true" :model="lookForm" label-width="80px" disabled>
                <el-form-item label="提交时间">
                    <el-input v-model="lookForm.date"></el-input>
                </el-form-item>
                <el-form-item label="审批时间">
                    <el-input v-model="lookForm.acceptanceTime"></el-input>
                </el-form-item>
                <el-form-item label="审批状态">
                    <el-input v-model="lookForm.acceptanceState"></el-input>
                </el-form-item>
                <el-form-item label="说明">
                    <el-input type="textarea" v-model="lookForm.notes"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="lookDialog = false">取 消</el-button>
                <el-button type="primary" @click="lookDialog = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import BlueBtn from '@/components/BlueBtn.vue';
import RedBtn from '@/components/RedBtn.vue';
import SelectIpt from '@/components/SelectIpt.vue';
import TextIpt from '@/components/TextIpt.vue';
export default {
    components: {
        BlueBtn,
        RedBtn,
        SelectIpt,
        TextIpt
    },
    watch: {
        fitmentData(val) {
            this.filterFitment = val.filter(item => item.FitmentState == '待审批')
            this.AllFitment = this.filterFitment
            this.filterNoFitment = val.filter(item => item.FitmentState != '待审批')
            this.allNoFitment = this.filterNoFitment
        }
    },
    methods: {
        look(index,row){
            this.lookForm.date=row.AddDate
            this.lookForm.acceptanceTime=row.AddDate
            this.lookForm.acceptanceState=row.FitmentState
            this.lookForm.notes=row.Notes
            this.lookForm.owner=row.Owner
            this.lookForm.phone=row.Phone
            this.lookForm.num=row.deposit
            this.lookForm.day=row.FitmentDay
            this.lookForm.room=row.BuildingName + ' ' + row.UnitName + ' ' + row.RoomNumber
            this.lookForm.applyDate=row.SubmitDate
            this.lookDialog=true

        },
        acceptanceDate() {
            this.$axios.post('http://127.0.0.1/fitment/acceptance', {
                ...this.acceptanceForm,
                str: '已完成'
            }, {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.$message({
                    message: '修改成功',
                    type: 'success',
                    center: true
                });
                this.acceptanceDialog = false
                this.getAllDate()
            }).catch(err => {
                console.log(err);
            })
        },
        acceptanceClose() {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.acceptanceDialog = false
                })
                .catch(_ => { });
        },
        //点击验收
        acceptance(index, row) {
            this.acceptanceForm.owner = row.Owner
            this.acceptanceForm.room = row.BuildingName + ' ' + row.UnitName + ' ' + row.RoomNumber
            this.acceptanceForm.id = row.ID
            this.acceptanceForm.num = Number(row.deposit).toFixed(2)
            this.acceptanceForm.index = index
            this.acceptanceDialog = true
        },
        //点击验收对话框里的确定按钮
        acceptanceConfrim() {
            this.$refs.acceptanceForm.validate((valid) => {
                if (valid) {
                    this.filterNoFitment[this.acceptanceForm.index].FitmentState = '已完成'
                    this.acceptanceDate()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //请求接口修改数据
        updateReplay(id, str) {
            this.$axios.post('http://127.0.0.1/fitment/replayFree', {
                id,
                str
            }, {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.$message({
                    message: '修改成功',
                    type: 'success',
                    center: true
                });
                this.replayDialog = false
                this.getAllDate()

            }).catch(err => {
                console.log(err);
            })
        },
        // 收取服务费
        replayNum(index, row) {

            this.replayForm.num = row.deposit
            this.replayForm.owner = row.Owner
            this.replayDialog = true
            this.replayForm.id = row.ID
        },
        replayClose() {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.replayDialog = false
                })
                .catch(_ => { });
        },
        replayConfirm() {
            this.$refs.replayForm.validate((valid) => {
                if (valid) {
                    this.updateReplay(this.replayForm.id, '待验收')
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        update() {
            this.$axios.post('http://127.0.0.1/fitment/updateState', {
                id: this.approvalForm.id,
                state: this.approvalForm.result == '通过' ? '待支付' : '已驳回',
                money: this.approvalForm.money,
                notes: this.approvalForm.notes,
                addman: localStorage.getItem('name')
            }, {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.$message({
                    message: '修改成功',
                    type: 'success',
                    center: true
                });
                this.approvalDialog = false
                this.getAllDate()
            }).catch(err => {
                console.log(err);
            })
        },
        approval(index, row) {
            this.approvalForm.room = row.BuildingName + ' ' + row.UnitName + ' ' + row.RoomNumber
            this.approvalForm.day = row.FitmentDay
            this.approvalForm.id = row.ID
            this.approvalForm.index = index
            this.approvalDialog = true
        },
        approvalClose() {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.approvalDialog = false
                })
                .catch(_ => { });
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.update()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //一键重置
        reset(index) {
            if (index) {
                this.$refs.filmentState.value = ''
                this.$refs.owner.input = ''
                this.$refs.ownerPhone.input = ''
                this.fitmentSearch = ''
            } else {
                this.$refs.fitmentName.input
                this.$refs.fitmentPhone.input
                this.roomInfo = ''
            }
        },
        //已审批的查询
        search() {

            this.$refs.filmentState.value
            this.$refs.owner.input
            this.$refs.ownerPhone.input
            const serach = {}
            if (this.$refs.filmentState.value) {
                serach.filmentState = this.$refs.filmentState.value
            }
            if (this.$refs.owner.input) {
                serach.owner = this.$refs.owner.input
            }
            if (this.$refs.ownerPhone.input) {
                serach.ownerPhone = this.$refs.ownerPhone.input
            }
            if (this.fitmentSearch.length) {
                serach.build = this.fitmentSearch[0]
                serach.unit = this.fitmentSearch[1]
                serach.room = this.fitmentSearch[3]
            }
            this.filterNoFitment = this.allNoFitment.filter(room => {
                if (serach.filmentState && room.FitmentState != serach.filmentState) {
                    return false; // 如果不匹配，则排除该房间
                }
                if (serach.ownerPhone && !room.Phone.includes(serach.ownerPhone)) {
                    return false; // 如果不匹配，则排除该房间
                }
                if (serach.owner && !room.Owner.includes(serach.owner)) {
                    return false; // 如果不匹配，则排除该房间
                }

                if (serach.build && room.BuildingName != serach.build) {
                    return false; // 如果不匹配，则排除该房间
                }
                if (serach.unit && room.UnitName != serach.unit) {
                    return false; // 如果不匹配，则排除该房间
                }
                if (serach.room && room.RoomNumber != serach.room) {
                    return false; // 如果不匹配，则排除该房间
                }
                // 如果所有条件都匹配或为空（表示用户没有为该字段指定筛选条件），则返回true以包含该房间
                return true;
            })

        },
        //点击待审批查询
        query() {

            const serach = {}
            if (this.$refs.fitmentName.input) {
                serach.fitmentName = this.$refs.fitmentName.input
            }
            if (this.$refs.fitmentPhone.input) {
                serach.fitmentPhone = this.$refs.fitmentPhone.input
            }
            if (this.roomInfo.length) {
                serach.build = this.roomInfo[0]
                serach.unit = this.roomInfo[1]
                serach.room = this.roomInfo[3]
            }

            this.filterFitment = this.AllFitment.filter(room => {
                if (serach.fitmentName && !room.Owner.includes(serach.fitmentName)) {
                    return false; // 如果不匹配，则排除该房间
                }
                if (serach.fitmentPhone && !room.Phone.includes(serach.fitmentPhone)) {
                    return false; // 如果不匹配，则排除该房间
                }

                if (serach.build && room.BuildingName != serach.build) {
                    return false; // 如果不匹配，则排除该房间
                }
                if (serach.unit && room.UnitName != serach.unit) {
                    return false; // 如果不匹配，则排除该房间
                }
                if (serach.room && room.RoomNumber != serach.room) {
                    return false; // 如果不匹配，则排除该房间
                }
                // 如果所有条件都匹配或为空（表示用户没有为该字段指定筛选条件），则返回true以包含该房间
                return true;
            })
        },
        handleClick(tab) {
            console.log(tab.index);

        },
        //级联选择器
        handleChange(value) {
            this.roomInfo = value
        },
        filmentChange(value) {
            this.fitmentSearch = value
        },
        getAllDate() {
            this.$axios.get('http://127.0.0.1/fitment/all', {
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.fitmentData = res.data
            }).catch(err => {
                console.log(err);
            })
        }
    },
    data() {
        return {
            lookForm: {
                date: "",
                acceptanceTime: "",
                acceptanceState: "",
                notes: '',
                owner:"",
                phone:'',
                num:'',
                day:'',
                room:'',
                applyDate:''
            },
            lookDialog: false,
            acceptanceForm: {
                owner: '',
                room: "",
                date: "",
                addman: '',
                desc: '',
                id: '',
                num: "",
                index: ''
            },
            acceptanceDialog: false,
            replayForm: {
                type: '',
                owner: "",
                num: 0,
                id: ''
            },
            replayDialog: false,
            rules: {
                money: [
                    {
                        required: true, message: "请输入装修管理费", trigger: 'blur'
                    }
                ],
                result: [
                    {
                        required: true, message: "请选择审批结果", trigger: 'blur'
                    }
                ],
                type: [
                    {
                        required: true, message: "请选择支付方式", trigger: 'blur'
                    }
                ],
                date: [
                    {
                        required: true, message: "请选择验收日期", trigger: 'blur'
                    }
                ],
                addman: [
                    {
                        required: true, message: "请输入验收人员", trigger: 'blur'
                    }
                ],
            },
            approvalForm: {
                room: '',
                result: '',
                money: '',
                notes: '',
                day: '',
                id: '',
                index: "",
            },
            approvalDialog: false,
            //待审批里上面的输入框的数据
            filmentState: ['待支付', '待验收', '已验收', '已驳回'],
            options: [
                {
                    "value": "楼栋A",
                    "label": "楼栋A",
                    "children": [
                        {
                            "value": "1单元",
                            "label": "1单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        },
                        {
                            "value": "2单元",
                            "label": "2单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        },
                        {
                            "value": "3单元",
                            "label": "3单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "value": "楼栋B",
                    "label": "楼栋B",
                    "children": [
                        {
                            "value": "1单元",
                            "label": "1单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        },
                        {
                            "value": "2单元",
                            "label": "2单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        },
                        {
                            "value": "3单元",
                            "label": "3单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "value": "楼栋C",
                    "label": "楼栋C",
                    "children": [
                        {
                            "value": "1单元",
                            "label": "1单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        },
                        {
                            "value": "2单元",
                            "label": "2单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        },
                        {
                            "value": "3单元",
                            "label": "3单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "value": "楼栋D",
                    "label": "楼栋D",
                    "children": [
                        {
                            "value": "1单元",
                            "label": "1单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        },
                        {
                            "value": "2单元",
                            "label": "2单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        },
                        {
                            "value": "3单元",
                            "label": "3单元",
                            "children": [
                                {
                                    "value": "1层",
                                    "label": "1层",
                                    "children": [
                                        { "value": "101", "label": "101" },
                                        { "value": "102", "label": "102" }
                                    ]
                                },
                                {
                                    "value": "2层",
                                    "label": "2层",
                                    "children": [
                                        { "value": "201", "label": "201" },
                                        { "value": "202", "label": "202" }
                                    ]
                                },
                                {
                                    "value": "3层",
                                    "label": "3层",
                                    "children": [
                                        { "value": "301", "label": "301" },
                                        { "value": "302", "label": "302" }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ],
            //已审批的级联选择
            fitmentSearch: [],
            roomInfo: [],
            //装修的所有数据
            fitmentData: [],
            //过滤未审核的数据
            filterFitment: [],
            //过滤已审核的数据
            filterNoFitment: [],
            tableColumns: [
                { prop: 'BuildingName', label: '楼栋', width: 150 },
                { prop: 'UnitName', label: '单元', width: 150 },
                { prop: 'RoomNumber', label: '房间', width: 150 },
                { prop: 'Owner', label: '姓名', width: 150 },
                { prop: 'Phone', label: '手机号', width: 200 },
                { prop: 'FitmentDate', label: '提交日期', width: 150 },
                { prop: 'FitmentDay', label: '装修工期(天)', width: 200 },
                { prop: 'SubmitDate', label: '提交时间', width: 200 },
            ],
            table1Columns: [
                { prop: 'BuildingName', label: '楼栋', width: 100 },
                { prop: 'UnitName', label: '单元', width: 100 },
                { prop: 'RoomNumber', label: '房间', width: 100 },
                { prop: 'Owner', label: '姓名', width: 100 },
                { prop: 'FitmentDate', label: '提交日期', width: 150 },
                { prop: 'FitmentDay', label: '装修工期(天)', width: 110 },
                { prop: 'deposit', label: '装修押金(元)', width: 110 },
                { prop: 'FitmentState', label: '状态', width: 100 },
                { prop: 'FitmentAddMan', label: '审批人', width: 150 },
                { prop: 'SubmitDate', label: '审批时间', width: 200 },
            ],
        }
    },
    mounted() {

        this.getAllDate()
    }
}
</script>

<style scoped>
.lookDialog>>>textarea{
    resize: none;
}
.lookDialog>>>.el-dialog__body {
    padding: 30px 50px;
}

.lookContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.lookContent li {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    min-width: 30%;
}

.lookContent p {
    min-width: 80px;
}

.lookTitle {
    font-size: 15px;
    font-weight: bold;
    color: #666;
    padding-left: 10px;
    border-left: 5px solid rgba(51, 153, 255, 1);
    margin-bottom: 30px;
}

.acceptanceTitle span {
    font-size: 18px;
    margin: 0 5px;
}

.acceptanceTitle {
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 150, 150, 1);
    border-radius: 5px;
    height: 39px;
    line-height: 39px;
    background-color: rgba(255, 238, 238, 1);
    margin-bottom: 20px;
    color: #f95e5a;
    font-weight: bold;
}

.acceptanceDialog>>>textarea {
    width: 400px;
    height: 100px;
    resize: none;
}

.acceptanceDialog>>>.el-input {
    width: 200px;
}

.replayContent-num {
    font-size: 16px;
    color: #ff3b30 !important;
}

.replayDialog span {
    color: #333;
}

.replayDialog>>>.el-dialog__body {
    padding: 30px 50px;
    margin-bottom: 20px;
}

.replayContent p {
    min-width: 80px;
}

.replayContent li {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.approval>>>.el-input {
    width: 200px;
}

.approval>>>textarea {
    resize: none;
    height: 80px;
    width: 400px;
}

.fitment {
    display: flex;
    align-items: center;
    padding-left: 60px;
    padding-bottom: 20px;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 20px;
}

.fitment p {
    margin-right: 30px;
}

.table>>>.el-table {
    min-height: 550px;
}

.select>>>.el-cascader {
    line-height: normal;
}

.select>>>.el-input__icon {
    line-height: 30px;
}

.select {
    display: flex;
    align-items: center;
}

.select>>>input {
    height: 30px;
    width: 350px;
    margin-left: 20px;
}

.table>>>.cell {
    text-align: center;
}

.table {
    margin-top: 20px;
}


.top ul {
    display: flex;
}

.top li {
    white-space: nowrap;
    font-size: 13px;
    color: #666;
    margin-right: 50px;
    margin-bottom: 20px;
}
</style>